<template>
	<a-drawer
		:title="formData.id ? '编辑' : '增加'"
		width="30%"
		:visible="visible"
		:destroyOnClose="true"
		:body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-tabs v-model:activeKey="activeTabsKey">
				<!--force-render 被隐藏时是否渲染 DOM 结构-->
				<a-tab-pane key="1" tab="基础信息" force-render>
					<a-form-item label="名称：" name="name">
						<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
					</a-form-item>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="编码：" name="code">
								<a-input v-model:value="formData.code" placeholder="请输入编码" allow-clear />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="状态" name="state">
								<!--fieldNames 自定义节点 label、value、options 的字段-->
								<a-select
									:allowClear="true"
									v-model:value="formData.state"
									placeholder="请选择状态"
									:fieldNames="{ label: 'name', value: 'code', options: 'options' }"
									:options="SIMPLE_STATE_DIC"
								/>
							</a-form-item>
						</a-col>
					</a-row>
					<a-form-item label="类型" name="type">
						<!--fieldNames 自定义节点 label、value、options 的字段-->
						<a-select
							:allowClear="true"
							v-model:value="formData.type"
							placeholder="请选择类型"
							:fieldNames="{ label: 'label', value: 'value', options: 'options' }"
							:options="bizTypeOptions"
						/>
					</a-form-item>
					<a-form-item label="选择组织：" name="orgId">
						<a-tree-select
							v-model:value="formData.orgId"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择组织"
							allow-clear
							:tree-data="treeData"
							:field-names="{
								children: 'children',
								label: 'name',
								value: 'id'
							}"
						></a-tree-select>
					</a-form-item>
					<a-form-item label="负责人：" name="ponPer">
						<user-selector
							v-model:value="formData.ponPer"
							placeholder="请选择负责人"
							:allowClear="true"
							:showSearch="true"
						></user-selector>
					</a-form-item>
					<a-form-item label="相关人：" name="relPer">
						<user-selector
							mode="multiple"
							v-model:value="formData.relPer"
							placeholder="请选择相关人"
							:allowClear="true"
							:showSearch="true"
						></user-selector>
					</a-form-item>
					<a-form-item label="附件：" name="enclosure" :rules="[{ required: true, message: 'Please pick an item!' }]">
						<CustomUpload :isPreview="true" v-model:file-list="formData.enclosure" uploadMode="drag" />
					</a-form-item>
				</a-tab-pane>
				<a-tab-pane key="2" tab="更多信息" force-render>
					<a-form-item label="附件2：" name="enclosure2">
						<XnUpload v-model:file-list="formData.enclosure2" uploadMode="drag" :maxCount="2" />
					</a-form-item>
					<a-form-item label="备注：" name="remark">
						<a-textarea v-model:value="formData.remark" :rows="8" />
					</a-form-item>
				</a-tab-pane>
			</a-tabs>
		</a-form>

		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</template>
	</a-drawer>
</template>

<script setup name="bizSimpleForm">
	import { required, rules } from '@/utils/formRules'
	import { SIMPLE_STATE_DIC, SIMPLE_STATE } from './simpleConst'
	import tool from '@/utils/tool'
	import bizUserApi from '@/api/biz/bizUserApi'
	import UserSelector from '@/components/Selector/UserSelector.vue'
	import CustomUpload from '@/components/CustomUpload/index.vue'
	import XnUpload from '@/components/XnUpload/index.vue'

	import { toRaw, nextTick } from 'vue'
	import bizSimpleApi from '@/api/biz/bizSimpleApi'
	let visible = ref(false)

	const formRef = ref()
	const activeTabsKey = ref('2')

	// 表单数据
	let formData = ref({})
	let bizTypeOptions = ref([])
	const treeData = ref([])

	// 定义emit事件
	const emit = defineEmits({ successful: null })

	// 打开抽屉 record为表格行数据
	const onOpen = async (record) => {
		visible.value = true
		// 数据初始化
		formData.value = {
			name: '测试名称',
			state: SIMPLE_STATE.NORMAL
		}
		if (record) {
			// // 模拟数据start
			// record.enclosure2 = '1591687744640438274;1591687771207159809'
			// record.enclosure = '1591687744640438274;1591687771207159809'
			// // 模拟数据end

			// 中间变量 // record为表格行数据，所以不能直接修改
			const midData = Object.assign({}, record)
			// 数据的二次处理
			midData.relPer = midData.relPer ? midData.relPer.split(';') : []
			midData.enclosure2 = await tool.idStrToFileList(midData.enclosure2)
			midData.enclosure = await tool.idStrToFileList(midData.enclosure)

			formData.value = midData
		}
		// 类型字典
		bizTypeOptions.value = tool.dictList('BIZ_TYPE')
		// 机构选择器数据
		bizUserApi.userOrgTreeSelector().then((res) => {
			console.log(res)
			if (res !== null) {
				treeData.value = res
			}
		})
	}
	// 默认要校验的
	const formRules = {
		name: [required('请输入名称')],
		code: [required('请输入编号'), rules.train], // rules.phone
		state: [required('请输入编号')],
		type: [required('请选择类型')],
		orgId: [required('请选择组织')],
		ponPer: [required('请选择负责人')],
		relPer: []
		// enclosure: [required('请上传附件')]
	}

	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		activeTabsKey.value = '2'
	}

	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			const midData = Object.assign({}, formData.value)
			midData.relPer = midData.relPer ? midData.relPer.join(';') : ''
			midData.enclosure = tool.fileListToIdStr(formData.value.enclosure)
			midData.enclosure2 = tool.fileListToIdStr(formData.value.enclosure2)

			bizSimpleApi.bizSimpleSubmitForm(midData, !formData.value.id).then(() => {
				onClose()
				emit('successful')
			})
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style scoped></style>
